<template>
  <div class="my_header">
    <div class="my_head">
      <div class="bg"></div>
      <div class="user_info">
        <img :src="imgurl">
        <div class="user_text">
          <div>{{name}}</div>
          <div class="vip">{{vip}}</div>
        </div>
        <div class="shezhi">
          <van-icon name="setting" @click="gotoshezhi()"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imgurl: "http://img.tukexw.com/img/323c0f2e83bbea62.jpg",
      name: "未设置名称",
      vip: "一级会员"
    };
  },
  methods: {
    gotoshezhi() {
      this.$router.push("/shezhi");
    }
  }
};
</script>

<style>
.my_header {
  height: 140px;
}
.my_head .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 180px;
  width: 100%;
  background: url("../../assets/my_bg.png") center no-repeat;
  background-size: 100% 100%;
}
.user_info {
  margin-top: 40px;
  margin-left: 30px;
}
.user_info img {
  height: 100px;
  width: 100px;
  border-radius: 50%;
  float: left;
}
.user_info .user_text {
  margin-top: 20px;
  margin-left: 10px;
  float: left;
}
.user_info .user_text div {
  margin-top: 10px;
}
.user_info .user_text .vip {
  padding-left: 10px;
  padding-right: 10px;
  border: 1px #c17a6c solid;
  border-radius: 20px;
  text-align: center;
}

.user_info .shezhi {
  font-size: 25px;
  position: absolute;
  right: 70px;
  top: 60px;
}
</style>
